<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
     <link rel="shortcut icon"href="https://pic.baike.soso.com/ugc/baikepic2/7330/20160726230436-313769386.jpg/0"><title>高拍仪</title>
<style>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
    }   
    .video-output-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 10px 0;
    }
    #video-container,
    #output-container {
        width: 48%; /* 设置视频和显示截图的容器宽度 */
        position: relative; /* 添加相对定位以容纳绝对定位的红色框框 */
    }
    #video {
        width: 100%;
        object-fit: cover;
    }
    #canvas {
        display: none;
    }
    #output {
        display: none;
        width: 100%;
		background-color: pink;
        object-fit: contain; /* 确保图片按原比例填充且不拉伸 */
    }
    .red-box {
        position: absolute;
        border: 2px solid red;
        width: 100px;
        height: 100px;
        top: 50%; /* 使红色框框垂直居中 */
        left: 50%; /* 使红色框框水平居中 */
        transform: translate(-50%, -50%); /* 使用transform进行居中定位 */
        z-index: 1;
		max-width: 100%;
        max-height: 100%;
    }
    .buttons-container {
        text-align: center;
        margin-top: 1em;
    }
	 .button {
        background-color: Orange;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        margin: 0 10px;
        cursor: pointer;
    }
     .button:hover {
        background-color: sandybrown;
    }
	  body {
        background-color: lightblue;
    }
	  #percentage {
        color: blue;
    }
</style>
</head>
<body>
<div class="container">
    <div class="video-output-container">
        <div id="video-container">
            <video id="video" autoplay playsinline></video>
            <canvas id="canvas" width="640" height="480"></canvas>
            <div class="red-box"></div>
        </div>
        <div id="output-container">
            <img id="output" src="" />
        </div>
    </div>
	<div class="buttons-container">
		<input type="range" id="slider" min="0" max="100" value="50">
		<span id="percentage">50%</span>
		<button id="capture"class="button">拍照</button>
		<button id="download"class="button">下载</button>
</div>

</div>

<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var output = document.getElementById('output');
var captureButton = document.getElementById('capture');
var downloadButton = document.getElementById('download');
var redBox = document.querySelector('.red-box');
var stream;

// 开始视频流
if (navigator.getUserMedia) {
    navigator.getUserMedia({ video: true }, function(stream) {
        video.srcObject = stream;
        video.play();
    }, function(error) {
        console.error('获取视频流失败：', error);
    });
} else {
    alert('你的浏览器不支持视频流');
}

// 拍照
captureButton.addEventListener('click', function() {
    var x = (video.videoWidth - redBox.offsetWidth) / 2;
    var y = (video.videoHeight - redBox.offsetHeight) / 2;
    var width = redBox.offsetWidth;
    var height = redBox.offsetHeight;
    context.drawImage(video, x, y, width, height, 0, 0, canvas.width, canvas.height);
    output.src = canvas.toDataURL('image/jpg');
    output.style.display = 'block';
    canvas.style.display = 'none';
});
var slider = document.getElementById('slider');
var percentage = document.getElementById('percentage');

// 监听滑动条变化
slider.addEventListener('input', function() {
    var value = slider.value;
    redBox.style.width = (video.videoWidth * value / 100) + 'px';
    redBox.style.height = (video.videoHeight * value / 100) + 'px';
    percentage.innerText = value + '%';
});

// 下载图片
downloadButton.addEventListener('click', function() {
    var url = canvas.toDataURL('image/jpg');
    var a = document.createElement('a');
    a.href = url;
    a.download = 'screenshot.jpg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
});
</script>
</body>
</html>